<template>
  <div>
    <!-- 头部 banner -->
    <div v-show="windowCli" class="phone_header" id="phone_header">
      <herderph />
    </div>
    <div v-show="windowCli" style="opacity:0 ;">
      <herderph />
    </div>
    <div class="banner">
      <div class="header"
           v-show="!windowCli">
        <herderpc />
      </div>
      <!-- banner下方 -->
      <div class="banner_bottom" id="banner_top">
        <ul>
          <li class="wow slideInUp"
              :class="i==bitKey?'active_top':''"
              v-for="(item,i) in 2"
              :key="i"
              @click="botClick(i)"
              :style="bitKey==0&&i==0?`background-image: url('../../static/img/ban_bot_03.jpg')!important`:
              bitKey==1&&i==1?`background-image: url('../../static/img/ban_bot02_03.jpg')!important;background-size: 100% 100%;background-position: center;`:''">
            <p class="cl_biao">
              <span></span>
            </p>
            <p class="cl_big"
               style="margin-top: 5%;">2020</p>
            <p v-if="i==0"
               class="cl_big">AI数据行业竞争格局</p>
            <p v-if="i==1"
               class="cl_big">未有数据产品集</p>
            <p v-if="i==bitKey"
               class="cl_show">
              <span style="float:left">了解更多</span>
              <em></em>
            </p>
          </li>
        </ul>
      </div>
      <swiper :options="swiperOption"
              ref="mySwiper">
        <!-- slides -->
        <swiper-slide v-for='(item,i) of 1'
                      :key="i">
          <div class="box_slide">
            <img src="@/assets/banner_01.jpg"
                 alt="">
            <div class="banner_center">
              <div class="yinyue">
                <img src="@/assets/banner_yinyue.gif"
                     alt="">
              </div>
              <!-- <div class="xin">
                <img src="../assets/banner_xin.gif"
                     alt="">
              </div> -->
              <div class="pos">
                <p class="ban_tit wow slideInUp">
                  <span>数据点亮智慧</span>
                </p>
                <p class="ban_tit wow slideInDown">
                  <span>科技创造未来</span>
                </p>
                <p class="ban_tit2 wow slideInUp">为全球领先的AI企业提供深度行业解决方案</p>
              </div>
            </div>
          </div>
        </swiper-slide>
      </swiper>
    </div>
    <div class="main">
      <div class="cupotmain">
        <div class="cupt">
          <div class="cup_biao"></div>
          <div class="cup_ton">
            <p>2020</p>
            <p> AI数据行业竞争格局</p>
          </div>
          <p class="cuo_liao">了解更多</p>
        </div>
        <div class="cupt">
          <div class="cup_biao"></div>
          <div class="cup_ton">
            <p>2020</p>
            <p> AI数据行业竞争格局</p>
          </div>
          <p class="cuo_liao">了解更多</p>
        </div>
      </div>
    </div>
    <!-- 身体 -->
    <!-- 第一部分 pc -->
    <div class="main main_top box01show"
         style="margin-top:212px;">
      <div class="centerBox box01">
        <div class="xmn_title">
          <h1>语音识别</h1>
          <p class="col_fff">覆盖全球范围内120余种语言，可提供国内方言、民族语言，及国外多语种识别服务提供全球化语音服务能力</p>
        </div>
        <div class="borr">
          <div class="borr_cen">
            <span class="biao_3"></span>
            <p class="tit_03">{{timeYan[worm.index].name}}</p>
            <p class="tit_04"
               style="margin-top: 15px;">{{timeYan[worm.index].content}}</p>
            <p class="tit_04">{{timeYan[worm.index].content2}}</p>
          </div>
          <svg xmlns="http://www.w3.org/2000/svg"
               version="1.1"
               class="circle"
               preserveAspectRatio="xMinYMin meet"
               viewBox="0,0,308,308">
            <g transform="translate(4,4)">
              <circle cx="150"
                      cy="150"
                      r="148"
                      stroke="#aaa"
                      stroke-width="3"
                      id="bg" />
              <circle ref="mysvg"
                      cx="150"
                      cy="150"
                      r="148"
                      stroke="#fff"
                      stroke-width="3"
                      id="hk"
                      :stroke-dasharray="worm.extent"
                      :stroke-dashoffset="worm.extent - worm.position" />

              <g :transform="`translate(150,150)rotate(${i*45})`"
                 v-for="i in 8"
                 :key="i">
                <circle cx="150"
                        cy="150"
                        r="150"
                        stroke-width=""
                        id="hk" />
                <circle cx="-4"
                        cy="0"
                        :r="i==8?5:worm.index >= i?worm.index>8 && worm.index >= i+8?3:5:3"
                        stroke="#fff"
                        stroke-width="1"
                        id="hk"
                        transform="translate(152,2)"
                        class="on" />
              </g>

            </g>
          </svg>
        </div>
        <div class="centerBox yuanBox">
          <div class="yuanchild"
               v-for="(item,i) in yuanList"
               :key="i"
               :style="`transform: translate(0%,${Number(item.height) + 20}px) rotate(${wdr}deg) translate(0%,-${Number(item.height) + 20}px);bottom:${item.bottom}px;left:${item.left}px`">
            <yuandian :background="item.background"
                      :borderColor="item.borderColor"
                      :height="item.height" />
            <div class="yuan_text"
                 :style="`${item.textLeft}`">{{item.name}}</div>
          </div>
        </div>
      </div>
    </div>
    <!-- 第一部分 phone -->
    <div class="box01_ph"
         v-if="windowCli">
      <div class="box_center01">
        <div class="xmn_title">
          <h1>语音识别</h1>
        </div>
        <div class="borr">
          <div class="borr_cen"
               v-if="timeYan.length > 0">
            <span class="biao_3"></span>
            <p class="tit_03">{{timeYan[worm.index].name}}</p>
            <p class="tit_04"
               style="margin-top: 15px;">{{timeYan[worm.index].content}}</p>
            <p class="tit_04">{{timeYan[worm.index].content2}}</p>
          </div>
          <svg xmlns="http://www.w3.org/2000/svg"
               version="1.1"
               class="circle"
               preserveAspectRatio="xMinYMin meet"
               viewBox="0,0,308,308">
            <g transform="translate(4,4)">
              <circle cx="150"
                      cy="150"
                      r="148"
                      stroke="#aaa"
                      stroke-width="3"
                      id="bg" />
              <circle ref="mysvg"
                      cx="150"
                      cy="150"
                      r="148"
                      stroke="#fff"
                      stroke-width="3"
                      id="hk"
                      :stroke-dasharray="worm.extent"
                      :stroke-dashoffset="worm.extent - worm.position" />

              <g :transform="`translate(150,150)rotate(${i*45})`"
                 v-for="i in 8"
                 :key="i">
                <circle cx="150"
                        cy="150"
                        r="150"
                        stroke-width=""
                        id="hk" />
                <circle cx="-4"
                        cy="0"
                        :r="i==8?5:worm.index >= i?worm.index>8 && worm.index >= i+8?3:5:3"
                        stroke="#fff"
                        stroke-width="1"
                        id="hk"
                        transform="translate(152,2)"
                        class="on" />
              </g>

            </g>
          </svg>
        </div>
      </div>
    </div>
    <!-- 第二部分 pc phone -->
    <div class="main main_top"
         style="margin-top:99px;">
      <div class="centerBox sendbox">
        <div class="xmn_title">
          <h1>语音合成</h1>
          <p>专业TTS算法经验，丰富的声优资源，可提供高品质的TTS采集和标注服务</p>
        </div>
        <div class="xmn_bg"
             :style="`background-image:url(${chiImg})`">
          <!-- <img :src="chiImg"
               alt="">-->
          <div class="img_op"></div>
          <div class="sed_cen">
            <ul>
              <li v-for="(item,i) in chiList"
                  :key="i"
                  @click="chiClick(item,i)">
                <div class="cen_tex xmn_child"
                     :style="i==chiKey?'border-left: 3px solid #007fff;':''">
                  <p v-if="i!=chiKey">0{{i+1}}</p>
                  <div v-show="i==chiKey">
                    <p class="name">{{item.name}}</p>
                    <p class="zy"
                       v-html="item.zhiye"></p>
                    <p class="go"></p>
                  </div>
                </div>
              </li>
            </ul>
          </div>
        </div>
        <div class="xmn_bg2">
          <swiper :options="swiperOption3"
                  ref="mySwiper">
            <swiper-slide v-for='(item,i) of chiList'
                          :key="i">
              <img :src="item.img"
                   alt="">
              <div class="op_img2"></div>
              <div class="box_posi">
                <p class="name">{{item.name}}</p>
                <p class="zy"
                   v-html="item.zhiye"></p>
                <p class="go"></p>
              </div>
            </swiper-slide>
            <div class="swiper-button-prev swiper-button-prev3"
                 slot="button-prev"
                 style="outline: none;"></div>
            <div class="swiper-button-next swiper-button-next3"
                 slot="button-next"
                 style="outline: none;"></div>
          </swiper>
        </div>
      </div>
    </div>
    <!-- 第三部分 pc-->
    <div class="main th_03 main_top box01show">
      <div class="center_box">
        <div class="xmn_title">
          <h1>自然语言理解</h1>
          <p>丰富的NLU项目经验、强大的AI语言理解能力、海量文本资源、高质量标注结果</p>
        </div>
        <div class="sptBox">
          <swiper :options="swiperOption2"
                  ref="mySwiper">
            <swiper-slide v-for='(item,i) in ziranList'
                          :key="i">
              <div class="listput clearBoth">
                <ul>
                  <li @mouseover="mouseOver(i)"
                      @mouseleave="mouseLeave(i)">
                    <img :src="item.img"
                         alt="">
                    <div class="list_tex">
                      <p class="tit">{{item.title}}</p>
                      <p class="content">{{item.text}}</p>
                      <p :class="`biao ${mouBol==true&&i==mouKey?' animated fadeInLeft':''}`"></p>
                    </div>
                  </li>
                </ul>
              </div>
            </swiper-slide>

          </swiper>
          <div class="swiper-button-prev swiper-button-prev4"
               slot="button-prev">

          </div>
          <div class="swiper-button-next swiper-button-next4"
               slot="button-next"></div>
        </div>
      </div>
    </div>
    <!-- 第三把部分 phone -->
    <div class="center_main th_03ph">
      <div class="">
        <div class="xmn_title">
          <h1>自然语言理解</h1>
        </div>
        <div class="list_ph">
          <ul>
            <li v-for="(item,i) in newziranList[0]"
                :key="i">
              <img :src="item.img"
                   alt="">
              <div class="tex">
                <p class="tit">{{item.title}}</p>
                <p class="jian_tex">{{item.text}}</p>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <!-- 第四部分 -->
    <div class="main th_04 main_top">
      <div class="center_box">
        <div class="xmn_title">
          <h1>计算机视觉</h1>
          <p>专业的图像处理技术，支持OCR、语义分割、关键点、多边形、2D/3D矩形框等标注类型</p>
        </div>
        <div class="xmn_tab">
          <ul>
            <li v-for="(item,i) in tabList "
                :key="i"
                @click="tabCli(i,item.tabTxt)"
                :class="i==tabKey?'tab_act':''">
              <p class="biao"
                 :style="`background-image:url(${i==tabKey?item.biao:item.img})`"></p>
              <p class="tit">{{item.name}}</p>
            </li>
          </ul>
        </div>
      </div>
      <div class="contentBox">
        <img :src="tabTex"
             alt="">
      </div>
    </div>
    <!-- 第五部分 -->
    <div class="main">
      <div class="th_05">
        <video autoplay
               loop
               src=""
               poster="@/assets/video8_18.jpg">
          <!-- ../../static/img/未有科技效果1.mp4 -->
          <!-- <source
                  type="video/mp4" /> -->

          <!-- <source src="01.WebM"
                  type="video/WebM"> -->
        </video>
      </div>
    </div>
    <!-- 第六部分 -->
    <div class="main th_06 main_top">
      <div class="centerBox">
        <div class="xmn_title">
          <h1>合作伙伴</h1>
          <!-- <p>专业的图像处理技术，支持OCR、语义分割、关键点、多边形、2D/3D矩形框等标注类型</p> -->
        </div>
        <div class="content">
          <swiper :options="swiperOption5"
                  ref="mySwiper">
            <swiper-slide v-for='(item,i) of hezuoList'
                          :key="i">
              <ul>
                <li v-for="(item,i) in hezuoList[i]"
                    :key="i"
                    :style="`background-image:url(${item.logo})`"></li>
              </ul>
            </swiper-slide>
          </swiper>
        </div>
      </div>
    </div>
    <!-- 尾部 -->
    <footerpc />

  </div>
</template>

<script>

// import goLogin from '@/api/index'
import herderpc from './common/header_pc'
import herderph from './common/header_ph'
import footerpc from './common/footer'
import yuandian from './common/yuandian'
// import {WOW} from 'wowjs'
export default {
  components: {
    herderpc,
    footerpc,
    herderph,
    yuandian
  },
  data () {
    return {
      worm: {
        extent: 0,
        position: 0,
        index: 0
      },
      wdr: 0,
      // 轮播1
      swiperOption: {
        // 开启循环模式
        loop: false,
        // 开启鼠标滚轮控制Swiper切换
        mousewheel: false
      },
      // 轮播2
      swiperOption2: {
        loop: false,
        // 开启鼠标滚轮控制Swiper切换
        mousewheel: false,
        slidesPerView: 4,
        navigation: {
          nextEl: '.swiper-button-next4',
          prevEl: '.swiper-button-prev4'
        }
      },
      swiperOption3: {
        loop: false,
        // 开启鼠标滚轮控制Swiper切换
        mousewheel: false,
        navigation: {
          nextEl: '.swiper-button-next3',
          prevEl: '.swiper-button-prev3'
        }
      },
      swiperOption5: {
        effect: 'fade',
        speed: 2000,
        fadeEffect: {
          crossFade: true
        },
        // 自动轮播
        autoplay: {
          delay: 3000
        },
        // 开启循环模式
        loop: true,
        // 开启鼠标滚轮控制Swiper切换
        mousewheel: false
      },
      botlist: [],
      bitKey: 0, // banner 下的效果图
      chiList: [
        {
          'name': '声优',
          'zhiye': '专业发音人覆盖国内、亚洲、欧洲、北美',
          'img': '../../static/img/00302.jpg'
        },
        {
          'name': '录音棚',
          'zhiye': '<30dbA、<0.2S专业声卡和麦克风组件',
          'img': '../../static/img/00303.jpg'
        },
        {
          'name': '监听师',
          'zhiye': '<br><br>',
          'img': '../../static/img/00301.jpg'
        }
      ], // 语音合成列表
      ziranList: [
        {
          title: '情感分析',
          img: '../../static/img/3001_07.jpg',
          text: '基于分词颗粒度进行情感值分析标注、动态情感识别与模拟'
        },
        {
          title: '意图识别',
          img: '../../static/img/3002_07.jpg',
          text: '特定场景化示意图识别、slot提取、语义分析等标注'
        },
        {
          title: '实体词库',
          img: '../../static/img/3003_07.jpg',
          text: '音乐、专辑、电影、电视、歌手、主持人、导演、城市、POI、专有名词实体库'
        },
        {
          title: '语义模板',
          img: '../../static/img/yuyihua_03.jpg',
          text: '基于domain、slot语义交互模板库'
        },
        {
          title: '机器问答',
          img: '../../static/img/jiqiwenda_03.jpg',
          text: '金融、时政、购物、游戏等，AI多轮对话语义交互、场景交互模拟等'
        },
        {
          title: '发音字典',
          img: '../../static/img/fayin_03.jpg',
          text: '覆盖国内方言和官话及部分亚洲语系发音字典库'
        }
      ],
      chiKey: 0, // 语音合成点击切换效果图
      chiImg: '', // 语音合成效果图
      // 计算机视觉
      tabList: [
        {
          name: 'OCR识别',
          img: '../../static/img/biao_04_18.png',
          biao: '../../static/img/tab001_07.png',
          tabTxt: '../../static/img/tab_img_06.jpg'
        },
        {
          name: '语义分割',
          img: '../../static/img/biao_01_18.png',
          biao: '../../static/img/tab002_07.png',
          tabTxt: '../../static/img/8001_17.jpg'
        },
        {
          name: '点云标注',
          img: '../../static/img/biao_03_18.png',
          biao: '../../static/img/tab003_07.png',
          tabTxt: '../../static/img/tab_img_06.jpg'
        },
        {
          name: '视频标注',
          img: '../../static/img/biao_02_18.png',
          biao: '../../static/img/tab004_07.png',
          tabTxt: '../../static/img/8001_17.jpg'
        }
      ],
      tabKey: 0, // 选项卡key
      tabTex: '', // 选项卡图片
      // 合作列表
      hezuoList: [
        [
          {
            logo: '../../static/img/hezuo_01_17.png'
          },
          {
            logo: '../../static/img/hezuo_02_17.png'
          },
          {
            logo: '../../static/img/hezuo_04_17.png'
          },
          {
            logo: '../../static/img/hezuo_03_17.png'
          },
          {
            logo: '../../static/img/haoweilai.png'
          }
          // {
          //   logo: '../../static/img/hezuo_05_17.png'
          // }

        ],
        [
          {
            logo: '../../static/img/wangyi.png'
          },
          {
            logo: '../../static/img/sougao.png'
          },
          {
            logo: '../../static/img/tcl.png'
          },
          {
            logo: '../../static/img/sibike.png'
          },
          {
            logo: '../../static/img/moment_03.png'
          }
        ]
      ],
      yuanList: [
        {
          name: '东亚',
          background: '#57dae3',
          borderColor: '#57dae3',
          height: '187',
          rotate: '-20',
          bottom: '185',
          left: '188'
        },
        {
          name: '粤语',
          background: '#57dae3',
          borderColor: '#57dae3',
          height: '50',
          rotate: '-20',
          bottom: '130',
          left: '315'
        },
        {
          name: '英国口音',
          background: '#57dae3',
          borderColor: '#57dae3',
          height: '50',
          rotate: '0',
          bottom: '150',
          left: '559',
          textLeft: 'right:-213%'
        },
        {
          name: '吴语',
          background: '#57dae3',
          borderColor: '#57dae3',
          height: '150',
          rotate: '20',
          bottom: '187',
          left: '758',
          textLeft: 'left:-126%'

        }, {
          name: '阿拉伯',
          background: '#57dae3',
          borderColor: '#57dae3',
          height: '150',
          rotate: '20',
          bottom: '187',
          left: '905',
          textLeft: 'right:-177%'
        }
      ],

      mouBol: false, // 划入效果
      mouKey: null,
      windowCli: false,
      timeYan: [
        {
          name: '亚洲语系',
          content: '东亚 · 东南亚 · 中亚',
          content2: '南亚 · 西亚'
        },
        {
          name: '方言区域',
          content: '粤语 · 吴语 · 闽方言',
          content2: '客家话 · 台语'
        },
        {
          name: '亚洲语系',
          content: '东亚 · 东南亚 · 中亚',
          content2: '南亚 · 西亚'
        },
        {
          name: '方言区域',
          content: '粤语 · 吴语 · 闽方言',
          content2: '客家话 · 台语'
        },
        {
          name: '亚洲语系',
          content: '东亚 · 东南亚 · 中亚',
          content2: '南亚 · 西亚'
        },
        {
          name: '方言区域',
          content: '粤语 · 吴语 · 闽方言',
          content2: '客家话 · 台语'
        },
        {
          name: '亚洲语系',
          content: '东亚 · 东南亚 · 中亚',
          content2: '南亚 · 西亚'
        },
        {
          name: '方言区域',
          content: '粤语 · 吴语 · 闽方言',
          content2: '客家话 · 台语'
        },
        {
          name: '亚洲语系',
          content: '东亚 · 东南亚 · 中亚',
          content2: '南亚 · 西亚'
        },
        {
          name: '方言区域',
          content: '粤语 · 吴语 · 闽方言',
          content2: '客家话 · 台语'
        },
        {
          name: '亚洲语系',
          content: '东亚 · 东南亚 · 中亚',
          content2: '南亚 · 西亚'
        },
        {
          name: '方言区域',
          content: '粤语 · 吴语 · 闽方言',
          content2: '客家话 · 台语'
        },
        {
          name: '亚洲语系',
          content: '东亚 · 东南亚 · 中亚',
          content2: '南亚 · 西亚'
        },
        {
          name: '方言区域',
          content: '粤语 · 吴语 · 闽方言',
          content2: '客家话 · 台语'
        },
        {
          name: '亚洲语系',
          content: '东亚 · 东南亚 · 中亚',
          content2: '南亚 · 西亚'
        },
        {
          name: '方言区域',
          content: '粤语 · 吴语 · 闽方言',
          content2: '客家话 · 台语'
        }
      ],
      newziranList: [] // 新的自然语言理解数组
    }
  },
  created () {
    window.onresize = () => {
      console.log(document.body.clientWidth)
      if (document.body.clientWidth < 1000) {
        this.windowCli = true
      }
      if (document.body.clientWidth > 1000) {
        this.windowCli = false
      }
    }

    window.addEventListener('mousemove', this.lryb, false)
  },
  mounted () {
    this.chiClick(this.chiList[0], 0)
    this.tabCli(0, this.tabList[0].tabTxt)
    new this.$wow.WOW().init()
    // 监听屏幕宽度
    if (document.body.clientWidth < 1000) {
      this.windowCli = true
    }
    window.onresize = () => {
      if (document.body.clientWidth < 1000) {
        this.windowCli = true
      }
      if (document.body.clientWidth > 1000) {
        this.windowCli = false
      }
    }

    this.whirl()
    this.newziranList = this.arrList(this.ziranList, 4)
  },
  methods: {
    // time 语音合成
    whirl () {
      this.worm.extent = this.$refs.mysvg.getTotalLength()
      setTimeout(() => {
        let index = parseInt(this.worm.position / (this.worm.extent / 8))
        if (!isNaN(index)) {
          if (index >= 16) {
            this.worm.position = 0
            index = 0
          }
          this.worm.position += 1

          this.worm.index = index
        }
        this.whirl()
      }, 25)
    },
    lryb (event) {
      // event = window.event || event
      let half = window.innerWidth / 2
      let direction = event.clientX - half
      let wdr = 10 / half * direction
      this.wdr = -wdr
    },
    // getLogin () {
    //   goLogin.isLogin({
    //     username: 'admin',
    //     password: 'xl971021'
    //   }).then(res => {
    //     console.log(res.data)
    //     storage.set('userData', res.data)
    //     if (res.data.code) {
    //       this.$router.push({path: 'mycenter'})
    //     } else {
    //       alert('登陆失败')
    //     }
    //   }).catch(res => {
    //     return res
    //   })
    // }index
    // banner下的点击效果
    botClick (index) {
      this.bitKey = index
    },
    chiClick (item, index) {
      this.chiKey = index
      this.chiImg = item.img
    },
    tabCli (index, img) {
      this.tabKey = index
      this.tabTex = img
    },
    mouseOver (index, bol) {
      this.mouBol = true
      this.mouKey = index
    },
    mouseLeave (index, bol) {
      this.mouBol = false
      this.mouKey = index
    },
    // 数组分组
    arrList (arr, chunks) {
      var result = []
      var data = arr
      var chunk = chunks // 每3个分一组

      for (var i = 0, j = data.length; i < j; i += chunk) {
        result.push(data.slice(i, i + chunk))
      }

      console.log('更改后的数组', result)
      return result
    }
  }
}
</script>

<style lang="less" scoped>
.banner {
  width: 100%;
  height: auto;
  position: relative;
  .swiper-slide {
    height: 100%;
    font-size: 50px;
    background-color: rosybrown;
    .box_slide {
      height: 100%;
      position: relative;
      img {
        width: 100%;
        height: auto;
      }
    }
  }
}
.th_03ph {
  display: none;
}
.header {
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 999;
}
.banner_center {
  width: 1280px;
  height: calc(100% - 74px);
  position: absolute;
  top: 0;
  left: 50%;
  z-index: 1;
  margin-top: 74px;
  transform: translateX(-50%);
  overflow: hidden;
  .yinyue {
    width: 290px;
    height: 88px;
    position: absolute;
    top: 0;
    left: 0;
    img {
      width: 100%;
      height: auto;
    }
  }
  .xin {
    width: 65%;
    position: absolute;
    top: 0;
    right: -10%;
    img {
      width: 100%;
      height: 100%;
    }
  }
  .pos {
    position: absolute;
    top: 23%;
    .ban_tit {
      font-size: 80px;
      color: #092b56;
      line-height: 88px;
      font-weight: bold;
      overflow: hidden;
    }
    .ban_tit2 {
      margin-top: 27px;
      font-size: 18px;
      color: #092b56;
    }
  }
}
.banner_bottom {
  width: 1280px;
  height: auto;
  position: absolute;
  bottom: -101px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 999;
  overflow: hidden;
  ul {
    width: 100%;
    overflow: hidden;
    li {
      float: left;
      padding: 30px 46px 46px 46px;
      height: 157px;
      width: calc(40% - 92px);
      margin-top: 59px;
      transition: 0.3s all;
      background: #225c9e;
      border-radius: 5px;
      background-size: 100% 100%;
      background-position: center;
      cursor: pointer;
      .cl_big {
        color: #fff;
        font-size: 30px;
        line-height: 32px;
      }
      .cl_show {
        color: #fff;
        font-size: 16px;
        margin-top: 44px;
        transition: 0.3s all;
        em {
          display: block;
          width: 28px;
          height: 16px;
          background-image: url("../assets/jiantou.png");
          float: left;
          margin-left: 50px;
          background-repeat: no-repeat;
          background-position: center;
          background-size: cover;
        }
      }
      .cl_biao {
        width: 55px;
        height: 58px;
        background-image: url("../assets/bot_biao.png");
        background-repeat: no-repeat;
        background-position: center;
        background-size: 100% 100%;
      }
    }
    li:last-child {
      background: #7973c0;
    }
    li:last-child > .cl_biao {
      background: url("../assets/bot_biao2.png");
      background-repeat: no-repeat;
      background-position: center;
      background-size: 100% 100%;
    }
  }
}
.box01 {
  height: 747px;
  position: relative;
  background-image: url("../assets/pgyuan_14.jpg");
  background-position: center;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  position: relative;
  .yuanBox {
    width: 100%;
    height: 299px;
    position: absolute;
    bottom: 0;
    left: 0;
    .yuanchild {
      position: absolute;
      bottom: 66px;
      left: 143px;
      .yuan_text {
        font-size: 16px;
        position: absolute;
        top: 50%;
        right: -110%;
        color: #fff;
      }
    }
  }
  .borr {
    width: 299px;
    height: 299px;
    border-radius: 50%;
    // border: 1px solid #7897a4;
    position: absolute;
    top: 209px;
    left: 0;
    right: 0;
    margin: 0 auto;
    .circle {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      circle {
        fill: none;
      }
      circle.on {
        fill: #fff;
      }
    }
  }
  h1 {
    margin-top: 77px;
    font-size: 48px;
    color: #fff;
    text-align: center;
  }
  .jian {
    margin-top: 25px;
    font-size: 18px;
    color: #fff;
    text-align: center;
  }
  .borr_cen {
    width: 244px;
    height: 244px;
    border-radius: 50%;
    background: #fff;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -122px;
    margin-left: -122px;
    z-index: 99;
    .biao_3 {
      display: block;
      width: 73px;
      height: 50px;
      background: url("../../static/img/biao_03.png");
      margin: 0 auto;
      margin-top: 30px;
    }
    .tit_03 {
      margin-top: 22px;
      color: #434343;
      font-size: 36px;
      text-align: center;
      font-weight: bold;
    }
    .tit_03::after {
      content: "";
      width: 66px;
      height: 2px;
      display: block;
      background: #b1b1b1;
      margin: 0 auto;
      margin-top: 17px;
    }
    .tit_04 {
      color: #434343;
      font-size: 14px;
      text-align: center;
      font-weight: bold;
      line-height: 18px;
    }
  }
}
.xmn_title {
  text-align: center;
  color: #434343;
  h1 {
    font-size: 48px;
  }
  p {
    margin-top: 25px;
    font-size: 18px;
  }
}
.xmn_bg2 {
  display: none;
}
.xmn_bg {
  height: 585px;
  margin-top: 54px;
  position: relative;
  overflow: hidden;
  img {
    width: 100%;
    height: auto;
    // position: absolute;
    top: 0;
    left: 0;
    z-index: -2;
  }
  .img_op {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.4);
  }
  .sed_cen {
    width: 985px;
    height: 100%;
    margin: 0 auto;
    z-index: 2;
    ul {
      height: 100%;
      overflow: hidden;
      display: flex;
      justify-content: center;
      align-items: center;
      li {
        width: 30%;
        height: 100%;
        border-right: 1px solid #a69794;
        position: relative;
        transition: 0.3s all;
        cursor: pointer;
        overflow: hidden;
        .xmn_child {
          height: 231px;
          color: #fff;
          position: absolute;
          bottom: 64px;
          left: -1px;
          transition: 0.3s all;
          p {
            margin-left: 20px;
            font-size: 18px;
          }
          .name {
            font-size: 24px;
            margin-top: 80px;
          }
          .zy {
            font-size: 18px;
            margin-top: 12px;
            line-height: 1.5;
          }
          .go {
            margin-top: 31px;
            height: 16px;
            background: url("../assets/jiantou.png") no-repeat left;
            transition: 0.3s all;
          }
        }
      }
      li:nth-child(1) {
        border-left: 1px solid #a69794;
      }
    }
  }
}
.th_03 {
  padding: 104px 0 93px 0;
  margin-top: 100px;
  background: #f7f8fa;
  .sptBox {
    margin-top: 80px;
    position: relative;
    .swiper-container {
      padding: 40px 0px;
    }
    .swiper-button-next,
    .swiper-button-prev {
      width: 75px;
      height: 75px;
      // background: #fff;
      top: 38%;
      outline: none;
      box-shadow: 2px 2px 10px #888888;
    }
    .swiper-button-next {
      background: url("../../static/img/right_18.jpg") no-repeat center;
      right: -37px;
    }
    .swiper-button-prev {
      background: url("../../static/img/left_18.jpg") no-repeat center;
      left: -37px;
    }
    .swiper-slide {
      width: 25% !important;
      height: 100%;
      .listput {
        width: 100%;
        float: left;
        ul {
          li {
            width: 100%;
            float: left;
            background: #fff;
            transition: 0.3s all;
            cursor: pointer;
            overflow: hidden;
            .img_op {
              width: 100%;
              height: auto;
            }
            img {
              width: 100%;
              height: auto;
            }
            .list_tex {
              padding: 43px 44px;

              .tit {
                font-size: 24px;
                font-weight: bold;
              }
              .content {
                margin-top: 30px;
                font-size: 18px;
                line-height: 25px;
                color: #707070;
                height: 4em;
              }
              .biao {
                height: 16px;
                margin-top: 65px;
                opacity: 0;
                background: url("../../static/img/biao_25.png") no-repeat left;
              }
            }
          }
          li:hover {
            transform: scale(1.02);
            box-shadow: 0px 0px 15px #888888;
          }
        }
        ul:after {
          content: "";
          height: 0;
          line-height: 0;
          display: block;
          visibility: hidden;
          clear: both;
        }
      }
    }
    .swiper-slide:hover {
      transform: scale(1.02);
      box-shadow: 0px 0px 15px #888888;
      z-index: 999;
    }
    .swiper-slide::after {
      content: "";
      height: 0;
      line-height: 0;
      display: block;
      visibility: hidden;
      clear: both;
    }
  }
}
.center_box {
  max-width: 1280px;
  height: auto;
  margin: 0 auto;
}
.xmn_tab {
  width: 100%;
  margin-top: 60px;
  ul {
    li {
      width: 25%;
      float: left;
      padding: 57px 0 18px;
      text-align: center;
      border-left: 1px solid #d4d4d4;
      border-right: 1px solid #d4d4d4;
      box-sizing: border-box;
      background: #fff;
      transition: 0.3s all;
      border-bottom: 3px solid transparent;
      cursor: pointer;
      .biao {
        height: 55px;
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
      }
      .tit {
        font-size: 24px;
        font-weight: bold;
        margin-top: 30px;
      }
    }
  }
  ul:after {
    content: "";
    height: 0;
    line-height: 0;
    display: block;
    visibility: hidden;
    clear: both;
  }
}
.th_04 {
  padding: 104px 0 117px 0;
  background: #fff;
  .contentBox {
    height: auto;
    img {
      width: 100%;
      height: auto;
      object-fit: cover;
    }
  }
}
.th_05 {
  border-radius: 5px;
  border-radius: 0 0 5px 5px;
  video {
    width: 100%;
    height: 513px;
    source {
      width: 100%;
      height: 100%;
    }
  }
}
.th_06 {
  padding: 100px 0 100px 0;
  .content {
    margin-top: 75px;
    .swiper-slide {
      transition: 1s all;
    }
    ul {
      overflow: hidden;
      li {
        width: 20%;
        float: left;
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
        height: 71px;
      }
    }
  }
}
// ****************************
.active_top {
  width: calc(60% - 92px) !important;
  height: 216px !important;
  margin-top: 0 !important;
}
.tab_act {
  transform: scale(1.1);
  box-shadow: 2px 2px 10px #888888;
  border-bottom: 4px solid #007fff !important;
  border-radius: 0 0 5px 5px;
  border: none;
}

.cl_active {
  opacity: 1;
}
.cupotmain {
  display: none;
}
@media screen and (max-width: 1660px) {
  .banner_center .pos .ban_tit {
    font-size: 60px;
    line-height: 1.2;
  }
  .banner_center .pos .ban_tit2 {
    margin-top: 12px;
    font-size: 18px;
    color: #092b56;
  }
}

@media screen and (max-width: 1400px) {
  .banner_center .pos .ban_tit {
    font-size: 50px;
    line-height: 1.2;
  }
  .banner_center .pos .ban_tit2 {
    margin-top: 12px;
    font-size: 18px;
    color: #092b56;
  }
  .banner_center .xin {
    width: 55%;
  }
  .banner_center .yinyue {
    width: 180px;
    top: 15px;
  }
}

@media screen and (max-width: 1180px) {
  .active_top {
    width: calc(60% - 92px) !important;
    height: 137px !important;
    margin-top: 0 !important;
  }
  .banner_center {
    max-width: 90%;
  }
  .banner_bottom {
    max-width: 90%;
  }
  .banner_bottom ul li .cl_big {
    font-size: 19px;
    line-height: 25px;
  }
  .banner_bottom ul li {
    height: 104px;
    margin-top: 33px;
  }
  .banner_bottom ul li .cl_biao {
    width: 35px;
    height: 35px;
    background-size: 100% 100%;
  }
  .banner_bottom ul li .cl_show {
    color: #fff;
    font-size: 13px;
    margin-top: 24px;
  }
  .center_box {
    max-width: 90%;
  }
  .banner_center .pos .ban_tit {
    font-size: 42px;
    line-height: 50px;
  }
  .banner_center .pos .ban_tit2[data-v-47323bf2] {
    margin-top: 21px;
    font-size: 14px;
  }
}
.box01_ph {
  display: none;
}
@media screen and (max-width: 1000px) {
  .banner_center {
    margin-top: 0;
  }
  .banner_center .xin {
    width: 55%;
    right: 0;
  }
  .banner_center .yinyue {
    width: 20%;
    top: 15px;
  }
  .banner {
    overflow: hidden;
  }
  .th_03ph {
    display: block;
  }
  .main_top {
    margin-top: 0.9rem !important;
  }
  .banner_bottom {
    display: none;
  }
  .cupotmain {
    width: 100%;
    // padding: 0.25rem;
    overflow: hidden;
    display: block;
    font-size: 0.24rem;
    color: #fff;
    line-height: 1.2;
    padding: 0.25rem;
    .cupt {
      float: left;
      background-position: center;
      background-size: 100% 100%;
      background-repeat: no-repeat;
      padding: 0.25rem;
      width: calc(100% - 1rem);
      border-radius: 5px;
      .cuo_liao {
        margin-top: 0.45rem;
        font-size: 0.18rem;
      }
    }
    .cupt:last-child {
      margin-top: 0.25rem;
    }
    .cupt:nth-child(1) {
      background-image: url("../../static/img/ban_bot_03.jpg") !important;
    }
    .cupt:nth-child(2) {
      background-image: url("../../static/img/ban_bot02_03.jpg") !important;
      .cup_biao {
        background-image: url("../assets/bot_biao2.png");
      }
    }
    .cup_biao {
      width: 0.5rem;
      height: 0.5rem;
      background-image: url("../assets/bot_biao.png");
      background-position: center;
      background-size: 100% 100%;
      background-repeat: no-repeat;
    }
    .cup_ton {
      margin-top: 0.5rem;
    }
  }
  .banner .banner_center {
    margin-top: 0;
    height: calc(100% - 0px);
  }
  .banner_center .pos .ban_tit {
    font-size: 0.48rem;
    line-height: 1.1;
  }
  .banner .banner_center .pos .ban_tit2 {
    font-size: 0.26rem;
    margin-top: 0.25rem;
  }
  .banner .banner_center .pos {
    top: 28%;
  }
  .xmn_bg {
    display: none;
  }
  .sendbox {
    margin: 0;
    max-width: 100%;
  }
  .xmn_bg2 {
    width: 100%;
    display: block;
    position: relative;
    overflow: hidden;
    margin-top: 0.2rem;
    height: 3.5rem;
    .swiper-slide {
      width: 100%;
      height: auto;
    }
    .op_img2 {
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
      z-index: -1;
      background: rgba(0, 0, 0, 0.3);
      z-index: 1;
    }
    img {
      width: 100%;
      height: 100%;
    }
    .box_posi {
      position: absolute;
      top: 50%;
      left: 50%;
      z-index: 2;
      color: #fff;
      transform: translate(-50%, -50%);
      text-align: center;
      line-height: 1.5;
      font-size: 0.36rem;
    }
    .ul_box {
      overflow: hidden;
      color: #fff;
      ul {
        li {
          overflow: hidden;
          width: calc(100% - 0.5rem);
          border: 0.02rem solid #a69794;
          height: calc(1.16rem - 0.5rem);
          padding: 0.25rem;
          p {
            line-height: 1.4;
          }
        }
      }
    }
  }
  .xmn_title {
    h1 {
      font-size: 0.45rem;
    }
    p {
      display: none;
      font-size: 0.18rem;
      margin-top: 0.25rem;
      padding: 0 0.25rem;
    }
  }
  .th_03 {
    padding-top: 0.25rem;
    margin-top: 0;
  }
  .box01show {
    display: none;
  }
  .box01_ph {
    display: block;
  }
  .box01_ph {
    height: auto;
    padding: 0 0.25rem;
    margin-bottom: 0.25rem;
    position: relative;
    overflow: hidden;
    .box_center01 {
      height: 7.2rem;
      background-image: url("../../static/img/time_03.png");
      background-position: center;
      background-size: 100% 100%;
      background-repeat: no-repeat;
      overflow: hidden;
      .borr {
        width: 3.4rem;
        height: 3.4rem;
        border-radius: 50%;
        position: absolute;
        top: 20%;
        left: 0;
        right: 0;
        margin: 0 auto;
        .circle {
          position: absolute;
          left: 0;
          top: 0;
          width: 100%;
          height: 100%;
          circle {
            fill: none;
          }
          circle.on {
            fill: #fff;
          }
        }
      }
      .borr_cen {
        width: 3rem;
        height: 3rem;
        border-radius: 50%;
        background: #fff;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: 3;
        .biao_3 {
          display: block;
          width: 1rem;
          height: 0.5rem;
          background-image: url("../../static/img/biao_03.png");
          background-position: center;
          background-size: 100% 100%;
          background-repeat: no-repeat;
          margin: 0 auto;
          margin-top: 30px;
        }
        .tit_03 {
          margin-top: 0.2rem;
          color: #434343;
          font-size: 0.42rem;
          text-align: center;
          font-weight: bold;
        }
        .tit_03::after {
          content: "";
          width: 66px;
          height: 2px;
          display: block;
          background: #b1b1b1;
          margin: 0 auto;
          margin-top: 14px;
        }
        .tit_04 {
          color: #434343;
          font-size: 0.24rem;
          text-align: center;
          font-weight: bold;
          line-height: 1.5;
          margin-top: 0rem !important;
        }
      }
    }
  }
  .box01_ph .box_center01 h1 {
    margin-top: 0.5rem;
    color: #fff;
    text-align: center;
  }
  .list_ph {
    overflow: hidden;
    margin-top: 0.25rem;
    ul {
      overflow: hidden;
      li {
        width: 48%;
        float: left;
        margin-right: 4%;
        img {
          width: 100%;
          height: auto;
        }
        .tex {
          padding: 0.5rem 0;
          .tit {
            font-size: 0.48rem;
            font-weight: bold;
          }
          .jian_tex {
            font-size: 0.26rem;
            margin-top: 0.14rem;
            color: #707070;
            line-height: 1.4;
          }
        }
      }
      li:nth-child(2n) {
        margin-right: 0;
      }
    }
  }
  .th_04,
  .th_06 {
    padding: 0.25rem 0 0.25rem 0;
  }
  .th_05 video {
    height: auto;
  }
  .th_06 .content {
    margin-top: 0.25rem;
  }
  .foot {
    padding: 0.8rem 0;
  }
  .xmn_tab ul li {
    padding: 0.25rem 0;
  }
  .xmn_tab ul li .tit {
    font-size: 0.32rem;
    margin-top: 0.25rem;
  }
  .th_04 .contentBox {
    height: 3rem;
  }
  .th_04 .contentBox img {
    height: 100%;
  }
  .xmn_tab ul li .biao {
    height: 1rem;
  }
  .xmn_tab {
    margin-top: 0.5rem;
  }
  .botxhr p .rt {
    margin-top: 0.1rem;
  }
}
@media screen and (max-width: 767px) {
  .cupotmain {
    padding: 0.25rem;
    .cupt {
      width: calc(100% - 1rem);
      border-radius: 5px;
    }
    .cupt:last-child {
      margin-top: 0.25rem;
    }
  }
  .main_top {
    margin-top: 0rem !important;
  }
}
.phone_header{
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999999;
  width: 100%;
  height: auto;
}
</style>
